<template>
    <a-skeleton :loading="loading">
        <div class="title">
            {{ "Best " + type + ($route.fullPath.includes('/games') ? ' Games' : ' Apps') }}
        </div>
        <div class="description">
            {{ description }}
        </div>
        <TagList :list="list" :type="$route.fullPath.includes('/games') ? 'games' : 'apps'" />
        <div class="hotList">
            <HotItem class="hotItem" v-for="(item) in cateList" @click="handleClick(item)" style="margin-bottom: 16px;"
                :item="item" />
        </div>
        <div class="btn" @click="showMore" v-if="cateList && cateList.length === 24">
            load more
        </div>
    </a-skeleton>
</template>

<script setup>
import categoryList from '../../category.json'
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const route = useRoute()
const cateList = ref([])
const moreList = ref([])
const showMore = () => {
    cateList.value = moreList.value
}
function upperFirst(str) {
    str = str.toLowerCase()
    return str.replace(/\b\w|\s\w/g, fw => {
        return fw.toUpperCase()
    })
}
const type = ref(upperFirst(route.params.slug))

const loading = ref(false)
const description = ref('')
const seoTitle = ref('')
const seoDescription = ref('')
const list = ref([])
for (const item of categoryList) {
    if (type.value === item.name) {
        description.value = item.description
        seoTitle.value = item.seoTitle
        seoDescription.value = item.seoDescription
    }
}


const slug = ref(route.fullPath.includes('/games') ? `game-${route.params.slug}` : route.params.slug)
const loadData = async () => {
    loading.value = true
    const { data, error } = await useApi('/api/genre/getGenre', {
        method: "GET",
        params: {
            language: route.params.hasOwnProperty('language') ?  route.params.language : 'en'
        }
    })

    list.value = data.value?.genre_list.filter(item => {
        return item.genre_slug.includes('game-')
    })
    const { data: cate } = await useApi('/api/genre/getAppBySlug', {
        method: 'GET',
        params: {
            genre_slug: slug.value,
            language: 'en'
        }
    })
    moreList.value = cate.value
    if(moreList.value?.length > 24){
        cateList.value = moreList.value.slice(0, 24)
    }else{
        cateList.value = moreList.value
    }
    loading.value = false
}
const handleClick = (item) => {
    const url = (route.params.hasOwnProperty('language') ?  "/" + route.params.language : '') + `/android/${item.app_slug}`
    navigateTo(url)
}
loadData()
const config = useRuntimeConfig();
useHead({
    title: computed(() => { return seoTitle.value }),
    htmlAttrs: {
    lang: locale.value 
  },
    meta: [
        {
            name: 'robots',
            content: 'noindex,nofollow'
        },
        {
            name: 'description',
            content: computed(() => `${seoDescription.value}`)
        }
    ],
    link: [
    {
      rel: 'canonical',
      href: computed(() => {
        return `${config.public.apiBase}${route.fullPath}`;
      })
    }
  ]
})
</script>
<style scoped lang="less">
.title {
    color: var(--Text-Title, #3E4351);
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    margin-top: 12px;
    /* 116.667% */
}

.description {
    overflow: hidden;
    color: var(--Text-Text, #505662);
    text-overflow: ellipsis;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
    margin-top: 12px;
}

.hotList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    gap: 8px;
}

.hotItem {
    width: calc((100% - 7*8px)/8);
    flex: none;

    @media (max-width: 1600px) {
        width: calc((100% - 5*8px)/6);
        flex: none;
    }

    @media (max-width: 767px) {
        width: calc((100% - 2*8px)/3);
        flex: none;
    }
}

.btn {
    display: flex;
    max-width: var(--sm, 430px);
    padding: 10px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Brand, #775CE1);
    margin: 0 auto;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 142.857% */
    text-transform: capitalize;
    cursor: pointer;
    margin-bottom: 16px;
}
</style>